<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客-本子</title>
  <link rel="stylesheet" href="css/book_detail.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<div class="content">
  <!--评论-->
  <div class="commit-box-mask" >
    <div class="commit-box">

      <textarea class="pust-comment" cols="5" rows="11" name="comments"></textarea>
      <div onclick="pust_test()" class="commit-btn">
        <input type="button" value="重置"/>
      </div>
      <div class="pust-comment" onclick="pust_comment()" class="commit-btn">
        <input type="button" value="提交"/>
      </div>
      <div class="commit-btn" onclick="hidecomment()">
        <input type="button" value="关闭"/>
      </div>

    </div>
  </div>

  <!--主要内容-->
  <div class="clearfix book_list"  >
    <div class="book_list_left">
      <div class="user-info">
        <img src="images/9.jpg" alt="">
        <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xiaohai</div>
      </div>
    </div>
    <div class="book_list_right">
      <div class="title clearfix">
        你好
      </div>

      <div class="content">

        <div class="time">
          <div class="title-box">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span>阿达</span>
          </div>
          <div id="jsLeftBtn" class="collect">
            已收藏
            <!--收藏-->
          </div>
        </div>

        <div class="content_image">

          <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;" class="book-list-item-content"></div>
          <div id="book-list">

            <img src="images/11.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/15.jpg" alt="">

          </div>
        </div>



        <div class="hide_thing">
          <p onclick="showcomment()" style="cursor: pointer">回复获取隐藏东西</p>
        </div>

        <div class="hide_thing">
          asdsadsadsadsadsa
        </div>

      </div>
    </div>
  </div>

  <!--评论-->
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="clearfix book_list book_commit"  >
      <div class="book_list_left">
        <div class="user-info">
          <img src="images/avatar.png" alt="">
          <div style="text-align: center;width: 150px;color: #fff;line-height: 20px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden">xxx</div>

        </div>
      </div>
      <div class="book_list_right">

        <div class="content">

          <div class="time">
            <i style="color: #F6697A" class="fa fa-clock-o fa-2x"></i>
            <span> 2017-5</span>
          </div>

          <div class="content_image">
            <div  style="text-indent:2em;word-wrap:break-word;word-break:break-all;">
              asd
            </div>
            <span class="content_commit">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="js/picture.js"></script>
<script>
  $(function () {
    var booklist = $('#book-list img');

    booklist.each(function(index,value){
      var data_source = $(value).attr('src');
      $(value).attr({
        'src': data_source,
        'data-role': 'lightbox',
        'data-source': data_source,
        'data-group': "group-1",
        'data-id': "1-"+ index,
        'data-caption':'ss'
      });
    });

    var lightbox = new LightBox({
      speed:300,
      maxWidth:'auto',
      maxHeight:'auto',
      maskOpacity:0.5,
      scalePic:1
    });
  })
</script>
</html>